<template>
  <div class="container" ref="mainCon">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <el-row class="searchBox searchInputWidth">
        <el-form :inline="true" :model="filterField" ref="accountForm">
          <el-col :lg="8" :xl="6">
            <el-form-item label="区域" class="row-padding-bottom">
              <el-cascader
                ref="manageArea"
                v-model="areaId"
                :append-to-body="false"
                :options="areasOptions"
                @change="getAreaId"
                clearable
                filterable
                :props="{ checkStrictly: true }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-form-item>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchTable"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              class="commonBut saveBtn funComBut"
              icon="icon iconfont icontianjia"
              @click="toAdd()"
            >
              <span class="opetareText">添加</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          v-loading="loading"
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="name"
            label="审核功能"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="value"
            label="审核开关"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <el-switch
                class="switch"
                v-model="scope.row.value"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="ENABLED"
                inactive-value="DISABLE"
                active-text="启用"
                inactive-text="禁用"
                @change="changStatus($event, scope.row, scope.$index)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="areaDetailDesc"
            label="区域配置"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column label="操作" align="left" width="190" fixed="right">
            <template slot-scope="scope">
              <el-link type="primary" @click="toDelete(scope.$index, scope.row)"
                >删除</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
        ></Pagination>
      </div>
    </div>
    <!-- 添加审核弹框 -->
    <el-dialog
      title="添加审核"
      :visible.sync="formVisible"
      :close-on-click-modal="false"
      @close="closeDialog"
      custom-class="brand-dialog-min-width"
      width="550px"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-form
        :model="formData"
        label-width="80px"
        :rules="formRules"
        ref="formData"
      >
        <el-form-item label="区域" class="row-padding-bottom" prop="addAreaId">
          <el-cascader
            ref="manageAreaDia"
            v-model="addAreaId"
            :append-to-body="false"
            :options="areasOptions"
            @change="handleAddAreaIdChange"
            clearable
            filterable
            :props="{ checkStrictly: true }"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="审核功能" class="row-padding-bottom" prop="audit">
          <el-select
            v-model="formData.audit"
            filterable
            placeholder="请选择"
            clearable
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in auditOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" class="row-padding-bottom" prop="remark">
          <el-input
            type="textarea"
            placehoder="请输入驳回原因，提交后将短信提供项目"
            v-model="formData.remark"
            @blur="formData.remark = changeValue($event)"
            maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="handleClose" class="cancel">取消</el-button>
        <el-button
          type="primary"
          @click.native="submit"
          :loading="saveLoding"
          v-sdc
          class="save"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'laborAuditConfig',
  mixins: [scrollTable],
  data() {
    var checkArea = (rule, value, callback) => {
      var that = this
      if (that.addAreaId.length < 1) {
        return callback(new Error('请选择区域'))
      } else {
        callback()
      }
    }
    return {
      titleText: '审核管理',
      tableList: [],
      isShow: false, //列表加载
      loading: true,
      areaId: '', //区域
      filterField: {
        areaId: '',
        mainClassification: 'AUDIT_CONFIG',
      },
      requestUrl: 'api-e/cs/qualification/config/list',
      formVisible: false, //审核弹框
      addAreaId: '', //弹框区域
      auditOptions: [],
      formData: {
        areaId: '',
        audit: '',
        remark: '',
      },
      formRules: {
        addAreaId: [
          {
            required: true,
            validator: checkArea,
            trigger: 'change',
          },
        ],
        audit: [
          {
            required: true,
            message: '请选择审核功能',
            trigger: 'change',
          },
        ],
        remark: [
          {
            required: true,
            message: '请输入备注',
            trigger: 'blur',
          },
        ],
      },
      saveLoding: false,
    }
  },
  computed: {
    ...mapState(['areasOptions']),
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    //获取选中区域最后一级id
    getAreaId() {
      let areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },
    //弹框区域id
    handleAddAreaIdChange(item) {
      var areaId = this.addAreaId[this.addAreaId.length - 1]
      this.formData.areaId = areaId
    },
    //列表查询
    searchTable() {
      this.$refs.pagination.getTableListData()
    },
    // 获取列表数据
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    toAdd() {
      this.formVisible = true
      this.addAreaId = ''
      this.formData.areaId = ''
      this.formData.audit = ''
      this.formData.remark = ''
      //审核功能下拉框
      this.getAuditOptions()
      this.$nextTick(function () {
        this.$refs['formData'].clearValidate()
      })
    },
    toDelete(index, row) {
      this.$confirm('确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delLaborConfig(row)
        })
        .catch(() => {})
    },
    delLaborConfig(row) {
      this.axios({
        method: 'post',
        url: 'api-e/cs/qualification/config/delete',
        data: {
          id: row.id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              this.$nextTick(() => {
                this.$refs.pagination.getTableListData()
              })
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    handleClose() {
      this.formVisible = false
      this.$refs['formData'].resetFields()
    },
    getAuditOptions() {
      this.axios({
        method: 'post',
        url: 'api-bs/base/dicitem/typeorname',
        data: { dicitemType: 'AUDIT_TYPE' },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.auditOptions = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    submit() {
      this.saveLoding = true
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.toSaveAdd()
        } else {
          this.saveLoding = false
          return false
        }
      })
    },
    toSaveAdd() {
      let item = this.auditOptions.filter(
        (item) => item.id === this.formData.audit
      )
      this.axios({
        method: 'post',
        url: 'api-e/cs/qualification/config/add',
        data: {
          areaId: this.formData.areaId,
          subcategory: this.formData.audit,
          name: item[0].name,
          remark: this.formData.remark,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.saveLoding = false
            this.$message({
              message: '添加成功',
              type: 'success',
            })
            this.formVisible = false
            this.$nextTick(() => {
              this.$refs.pagination.getTableListData()
            })
          } else {
            this.saveLoding = false
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          this.saveLoding = false
        })
    },
    changStatus(event, row, index) {
      if (event == 'DISABLE') {
        const h = this.$createElement
        this.$msgbox({
          title: '提示',
          message: h('p', null, [
            h('span', null, '此操作将'),
            h('span', { style: 'color: #FF4949' }, '禁用'),
            h('span', '该开关?'),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
          .then((action) => {
            this.enable(row.id, event)
          })
          .catch(() => {
            row.value = 'ENABLED'
          })
      } else {
        const h = this.$createElement
        this.$msgbox({
          title: '提示',
          message: h('p', null, [
            h('span', null, '此操作将'),
            h('span', { style: 'color: #98F203' }, '启用'),
            h('span', '该开关?'),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
          .then((action) => {
            this.enable(row.id, event)
          })
          .catch(() => {
            row.value = 'DISABLE'
          })
      }
    },
    enable(id, enable) {
      this.axios({
        method: 'post',
        url: 'api-e/cs/qualification/config/update',
        data: {
          id: id,
          enable: enable,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '保存成功',
            })
            this.$refs.pagination.getTableListData()
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {})
    },
  },
}
</script>
<style lang="less" scoped>
/* switch按钮样式 */
/deep/.switch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff !important;
}
/*打开时文字位置设置*/
/deep/.switch .el-switch__label--right {
  z-index: 1;
}
/* 调整打开时文字的显示位子 */
/deep/.switch .el-switch__label--right span {
  margin-right: 9px;
}
/*关闭时文字位置设置*/
/deep/.switch .el-switch__label--left {
  z-index: 1;
}
/* 调整关闭时文字的显示位子 */
/deep/.switch .el-switch__label--left span {
  margin-left: 9px;
}
/*显示文字*/
/deep/.switch .el-switch__label.is-active {
  display: block;
}
/* 调整按钮的宽度 */
/deep/.switch.el-switch .el-switch__core,
/deep/.el-switch .el-switch__label {
  width: 70px !important;
  margin: 0;
}
@import '../../../static/css/filterArea.less';
</style>
